<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
        main{
            width: 200px;
            height: 150px;
            margin: 100px auto;
            background-color: black;
            color: white;
            text-align: center;
            position: relative;
        }
        input{
            width: 50px;
            text-align: center;
            margin-top: 20px;
        }
        button{
            display: block;
            background-color: blue;
            border: 0;
            margin: 50px auto;
            height: 40px;
            width: 80%;
            color: white;
            position: absolute;
            left: 10%;
            bottom: -40px;
        }
        .l{
            display: none;
        }
        .zanting{
            height: 30px;
            width: 60px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <main>
        <input type="text" value="10">
        <span>分钟</span>
        <input type="text" value="20">
        <span>秒</span>
        <button type="button" onclick="play()">开始倒计时</button>
        <button type="button" onclick="stop()" class="l">重新倒计时</button>
        <button type="button" onclick="zanting()" class="zanting">暂停</button>
    </main>
</body>
</html>
<script>
    var buttonp = document.querySelectorAll('button')[0];
    var buttons = document.querySelectorAll('button')[1];
  buttonp.onclick=function (){
    function play(){
    var min = document.querySelectorAll('input')[0].value;
    var sec = document.querySelectorAll('input')[1].value;
        sec=sec-1;
        sec=sec<10?"0"+sec:sec;
        if(sec==0){
            min=min-1;  
            sec=60;
            min=min<10?"0"+min:min;
        }
        if(min<0){
            min=20;
        }
        
        document.querySelectorAll('input')[1].value=sec;
        document.querySelectorAll('input')[0].value=min;  
        buttonp.style.display='none';
        buttons.style.display='block'; 
        }
        var temp=setInterval(play,1000);        
    }
        
       
    function stop(){   
        document.querySelectorAll('input')[1].value=20;
        document.querySelectorAll('input')[0].value=10;
        buttons.style.display='none';
        buttonp.style.display='block'
    }   
    function zanting(){
            window.location.reload();
    } 
         
    
    
</script>